<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>

</head>
<body>
<div id="test"></div>
</body>
<script src="../js/new/react.development.js"></script>
<script src="../js/new/react-dom.development.js"></script>
<!--将jsx转为js-->
<script src="../js/new/babel.min.js"></script>
<script src="../js/new/prop-types.js"></script>
<!--babel  由babel转换jsx-->
<script type="text/babel">
    class Sum extends React.Component {
        constructor(props) {
            console.log('Sum-constructor')
            super(props);
            this.state = {
                count: 0
            }
        }

        add = () => {
            this.setState({
                count: this.state.count + 1
            })
        }
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        force = () => {
            this.forceUpdate()
        }

        // 若state的值在任何时候都取决于props，可以使用，不推荐。
        static getDerivedStateFromProps(props, state) {
            console.log('Sum-getDeriverStateFromProps', props, state)
            return null
        }

        //组件挂在完毕
        componentDidMount() {
            console.log('Sum-componentDidMount')
        }

        //卸载将要销毁
        componentWillUnmount() {
            console.log('Sum-componentWillUnmount')
        }

        //控制组件更新"阀门"
        shouldComponentUpdate() {
            console.log('Sum-shouldComponentUpdate')
            return true
        }

        // 获取更新前的数值，快照
        getSnapshotBeforeUpdate() {
            console.log('Sum-getSnapshotBeforeUpdate')
            return 123
        }

        //组件更新后
        componentDidUpdate(preProps, preState, snapshotValue) {
            console.log('Sum-componentDidUpdate', preProps, preState, snapshotValue)
        }

        render() {
            console.log('Sum-render')
            return (
                <div>
                    <h2>当前求和:{this.state.count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据，强制更新</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Sum/>, document.getElementById('test'))
</script>
</html>